<script setup lang="ts">
// import { ref, onMounted } from "vue";
// import { debounce, adjustFontSize } from "@/utils/responsive";

// const isCollapse = ref(true);
// const handleOpen = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath);
// };
// const handleClose = (key: string, keyPath: string[]) => {
//   console.log(key, keyPath);
// };

// onMounted(() => {
//   const cancalDebounce = debounce(adjustFontSize, 500);
//   // 页面加载完成时初始化字体大小并开始监听
//   window.addEventListener("load", function () {
//     adjustFontSize();
//     window.addEventListener("resize", cancalDebounce);
//   });
//   // 页面卸载时停止监听
//   window.addEventListener("unload", function () {
//     window.removeEventListener("resize", cancalDebounce);
//   });
// });

</script>

<template>
  <!-- <div class="app">
    <div class="nav">
      <el-menu
        default-active="2"
        background-color="#f0a7a7"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-menu-item index="0" @click="isCollapse = !isCollapse">
          {{ isCollapse ? "展开" : "折叠" }}
        </el-menu-item>
        <div class="flex-grow" />

        <el-menu-item index="2">
          <el-icon>
            <img src="@/assets/star.svg" width="100%" alt="Vue logo" />
          </el-icon>
          <template #title>设置</template>
        </el-menu-item>
        <el-menu-item index="3">
          <el-icon>
            <img src="@/assets/star.svg" width="100%" alt="Vue logo" />
          </el-icon>
          <template #title>简介</template>
        </el-menu-item>
        <el-sub-menu index="4">
          <template #title>
            <el-icon>
              <img src="@/assets/star.svg" width="100%" alt="Vue logo" />
            </el-icon>
            <span>文件</span>
          </template>
          <el-menu-item index="4-1">我的文件</el-menu-item>
          <el-menu-item index="4-2">最近上传</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>

  </div> -->
  <!-- 路由挂载 -->
  <router-view></router-view>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
.el-menu {
  border: none;
  height: 100%;
}

.app {
  flex: 1;
  padding-left: 300px;
}
</style>

<style scoped lang="scss">
.nav {
  position: fixed;
  left: 0;
  height: 100%;
  width: 300px;
}
</style>
